<template>
  <h1>我是Demo组件，{{msg}}</h1>
  <h2>一个人的信息</h2>
  <h3>姓名：{{person.name}}</h3>
  <h3>年龄：{{person.age}}</h3>
  <button @click="test">测试触发一下hello事件</button>
</template>

<script>
import { reactive } from 'vue'
export default {
  name: 'Demo',
  props: ['msg'],
  emits: ['hello'],
  // beforeCreate() {
  //   console.log('---beforeCreate---', this)
  // },
  setup(props, context) {
    // console.log('---setup---', this)
    // console.log('---setup---', props)
    // console.log('---setup---', context.attrs) // 相当于vue2中的$attrs
    console.log('---setup---', context.slots)
    // 数据
    let person = reactive({
      name: '张三',
      age: 18
    })

    function test() {
      context.emit('hello', '你好')
    }
    
    // 返回一个对象（常用）
    return {
      person, test
    }
  }
}
</script>